<template>
  <view class="weather-container">
    <!-- 页面标题 -->
    <view class="page-title">泉州天气预报</view>

    <!-- 加载中状态 -->
    <view v-if="loading" class="loading">加载中...</view>

    <!-- 错误提示 -->
    <view v-else-if="error" class="error">{{ error }}</view>

    <!-- 天气数据展示（请求成功后显示） -->
    <view v-else class="weather-content">
      <!-- 1. 当前天气概览 -->
      <view class="current-weather">
        <view class="city-info">
          <text class="city-name">{{ cityInfo.city }}（{{ cityInfo.parent }}）</text>
          <text class="update-time">数据更新的时间：{{ cityInfo.updateTime }}</text>
        </view>
        <view class="current-stats">
          <view class="temp-box">
            <text class="temp">{{ data.wendu }}℃</text>
            <text class="weather-type">{{ data.forecast[0].type }}</text>
          </view>
          <view class="other-stats">
            <text>湿度：{{ data.shidu }}</text>
            <text>PM2.5：{{ data.pm25 }}μg/m³</text>
            <text>空气质量：{{ data.quality }}</text>
            <text>感冒提示：{{ data.ganmao }}</text>
          </view>
        </view>
      </view>

      <!-- 2. 未来7天天气预报 -->
      <view class="forecast-title">未来7天天气预报</view>
      <view class="forecast-list">
        <view class="forecast-item" v-for="(item, index) in data.forecast.slice(0,7)" :key="index">
          <text class="date">{{ item.ymd }}（{{ item.week }}）</text>
          <text class="weather">{{ item.type }}</text>
          <text class="temp-range">{{ item.low }} / {{ item.high }}</text>
          <text class="wind">{{ item.fx }} {{ item.fl }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      weatherURL: "http://t.weather.sojson.com/api/weather/city/101230501", // 目标接口地址
      loading: true, // 加载状态标记
      error: "", // 错误信息
      cityInfo: {}, // 城市信息（如名称、所属省份）
      data: {} // 天气数据（湿度、温度、预报等）
    };
  },
  onLoad() {
    // 页面加载时立即请求天气数据
    this.getWeatherData();
  },
  methods: {
    // 核心方法：请求并处理天气数据
    getWeatherData() {
      uni.request({
        url: this.weatherURL, // 接口地址
        method: "GET", // 接口支持GET请求
        timeout: 10000, // 10秒超时保护
        success: (res) => {
          // 1. 先判断接口响应状态（status=200表示接口请求成功）
          if (res.data.status === 200) {
            this.cityInfo = res.data.cityInfo; // 提取城市信息
            this.data = res.data.data; // 提取核心天气数据
            this.loading = false; // 关闭加载状态
          } else {
            // 接口返回错误（如城市ID无效）
            this.error = `数据获取失败：${res.data.message || "未知错误"}`;
            this.loading = false;
          }
        },
        fail: (err) => {
          // 网络请求失败（如无网络、超时）
          this.error = `请求失败：${err.errMsg || "请检查网络连接"}`;
          this.loading = false;
        }
      });
    }
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.weather-container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 标题样式 */
.page-title {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
}

/* 加载/错误提示样式 */
.loading, .error {
  text-align: center;
  font-size: 28rpx;
  padding: 50rpx 0;
  color: #666;
}
.error {
  color: #ff4d4f; /* 错误信息红色高亮 */
}

/* 当前天气概览样式 */
.current-weather {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.city-info {
  margin-bottom: 20rpx;
}
.city-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}
.update-time {
  font-size: 24rpx;
  color: #999;
}
.current-stats {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.temp-box {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.temp {
  font-size: 60rpx;
  font-weight: bold;
  color: #333;
}
.weather-type {
  font-size: 32rpx;
  color: #007aff;
  padding: 5rpx 15rpx;
  background-color: #e6f4ff;
  border-radius: 50rpx;
}
.other-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx 30rpx;
  font-size: 24rpx;
  color: #666;
}

/* 未来预报样式 */
.forecast-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}
.forecast-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}
.forecast-item {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 25rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 5rpx rgba(0,0,0,0.03);
}
.forecast-item text {
  font-size: 24rpx;
  color: #666;
}
.forecast-item .date {
  width: 220rpx;
  color: #333;
}
.forecast-item .weather {
  width: 120rpx;
  text-align: center;
  color: #007aff;
}
.forecast-item .temp-range {
  width: 200rpx;
  text-align: center;
}
</style>